<template>
  <view class="news-card" :class="{'top-card': isTop, 'ad-card': isAd}">
   
    <view class="img-area" v-if="imgSrc">
      <image :src="imgSrc" mode="aspectFill"></image>
    </view>

  
    <view class="text-area" :style="{ marginLeft: imgSrc ? '15rpx' : '0' }">
     
      <text class="title">{{ title }}</text>
      
      <view class="tags-box">
        <text class="tag top-tag" v-if="isTop">置顶</text>
        <text class="tag ad-tag" v-if="isAd">广告</text>
        <text class="tag" v-for="(tag, index) in tags" :key="index">{{ tag }}</text>
      </view>

     
      <view class="info">
        <text>{{ author }}</text>
        <text>{{ comments }}评</text>
        <text>{{ time }}</text>
      </view>

      <view class="search-area" v-if="hasSearch">
        <slot name="tips"></slot>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    title: { type: String, required: true },
    isTop: { type: Boolean, default: false },
    isAd: { type: Boolean, default: false },
    author: { type: String, required: true },
    comments: { type: Number, default: 0 },
    time: { type: String, required: true },
    hasSearch: { type: Boolean, default: false },
    tags: { type: Array, default: () => [] },
  
    imgSrc: { type: String, default: '' } 
  }
};
</script>
<style scoped>
.news-card {
  display: flex; 
  padding: 15rpx;
  margin-bottom: 10rpx;
  background: #fff;
  border-bottom: 1rpx solid #f5f5f5;
}


.img-area {
  width: 160rpx; 
  height: 120rpx; 
  border-radius: 8rpx; 
  overflow: hidden;
}
.img-area image {
  width: 100%;
  height: 100%;
}

.text-area {
  flex: 1; 
}


.tags-box {
  display: flex;
  margin: 8rpx 0;
}
.tag {
  font-size: 24rpx;
  padding: 2rpx 10rpx;
  margin-right: 10rpx;
  border-radius: 16rpx;
  border: 1rpx solid;
}
.top-tag {
  color: #ff4d4f;
  border-color: #ff4d4f;
}
.ad-tag {
  color: #00f;
  border-color: #00f;
}
.info {
  font-size: 24rpx;
  color: #999;
  display: flex;
  justify-content: space-between;
  margin-top: 8rpx;
}
.search-area {
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #666;
}
</style>